<template>
  <div class="prescriptionDialog_box">
    <el-dialog title="开处方" :visible.sync="dialogShow" width="720px" @close="cancelInfo">
      <p class="dialogTitle">
        处方类型
        <span>普通处方</span>
      </p>
      <div class="modelInfo">
        <vue-scroll ref="vs" :ops="$store.state.ops">
          <div class="modelInfo_box">
            <ul class="drugsList">
              <li class="drugsLi" v-for="(item,index) in data" :key="index">
                <img
                  src="/static/img/delete@2x.png"
                  alt=""
                  class="deleteImg"
                  v-show="index > 0"
                  @click="deleteItem(index)"
                >
                <h4>药品{{index + 1}}</h4>
                <div class="liItem">名称
                  <el-input
                    v-model="item.drugName"
                    placeholder="请输入药品名称 例如：阿司匹林肠溶片 25mg*100s"
                    maxlength="30"
                    minlength="2"
                  ></el-input>
                </div>
                <div class="liItem">数量
                  <el-input
                    v-model="item.drugCount"
                    placeholder="请输入药品数量 例如：2盒"
                    maxlength="10"
                    minlength="2"
                  ></el-input>
                </div>
                <div class="liItem">用法用量
                  <el-input
                    style="width:80.5%;"
                    v-model="item.usageAndDosage"
                    placeholder="请输入用法用量 例如：口服 1片/次 每日两次 服用3天"
                    maxlength="30"
                    minlength="2"
                  ></el-input>
                </div>
              </li>
            </ul>
          </div>
        </vue-scroll>
      </div>
      <footer class="footer">
        <div class="cursor" :class="{addItem:true,notClick:notClick}" @click="addItem">
          <img src="/static/img/add@2x.png" alt="">
          添加药品
        </div>
        <div class="addItem cursor submit" @click="submit">生成处方</div>
      </footer>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: ["showTrue", "clearData"],
  data() {
    return {
      dialogShow: false,
      input: "",
      notClick: false,
      data: [
        {
          drugName: "",
          drugCount: "",
          usageAndDosage: ""
        }
      ]
    };
  },
  created() {},
  mounted() {},
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    deleteItem(index) {
      this.data.splice(index, 1);
    },
    addItem() {
      if (this.data.length < 5) {
        this.data.push({
          drugName: "",
          drugCount: "",
          usageAndDosage: ""
        });
      }
    },
    submit() {
      for (let i = 0; i < this.data.length; i++) {
        let item = this.data[i];
        if (item.drugName == "") {
          this.$message({
            type: "error",
            message: "请输入药品名称"
          });
          return;
        }
        if (item.drugCount == "") {
          this.$message({
            type: "error",
            message: "请输入药品数量"
          });
          return;
        }
        if (item.usageAndDosage == "") {
          this.$message({
            type: "error",
            message: "请输入药品用法用量"
          });
          return;
        }
      }
      this.$emit("submit", this.data);
    },
    cancelInfo() {
      this.$emit("close", false);
    }
  },
  filter: {},
  computed: {},
  watch: {
    clearData(val) {
      if (val) {
        this.data = [
          {
            drugName: "",
            drugCount: "",
            usageAndDosage: ""
          }
        ];
      }
    },
    showTrue(val) {
      this.dialogShow = val;
    },
    data(val) {
      if (val.length == 5) {
        this.notClick = true;
      } else {
        this.notClick = false;
      }
    }
  }
};
</script>

<style scoped>
.dialogTitle {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: rgba(42, 41, 40, 1);
  margin-left: 40px;
  height: 66px;
  display: flex;
  align-items: center;
  width: 80%;
}
.dialogTitle > span {
  display: inline-block;
  margin-left: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(55, 55, 55, 1);
}
.modelInfo {
  height: 479px;
  overflow: hidden;
}
.modelInfo_box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 40px;
  padding-bottom: 25px;
}
.drugsList {
  position: relative;
}
.drugsLi {
  width: 640px;
  height: 217px;
  border-radius: 3px;
  border: 1px solid rgba(228, 228, 228, 1);
  margin-top: 20px;

  box-sizing: border-box;
  padding: 0px 20px;
  position: relative;
  overflow: hidden;
}
.deleteImg {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 16px;
  right: 20px;
  cursor: pointer;
}
.liItem {
  font-size: 14px;
  margin-bottom: 14px;
}
.footer {
  width: 100%;
  height: 100px;
  background-color: #f1f1f1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addItem {
  margin: 0 15px;
  width: 150px;
  height: 40px;
  background: rgba(255, 199, 73, 1);
  border-radius: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 40px;
  text-align: center;
  /* cursor: pointer;
  float: left; */
}
.addItem img {
  width: 12px;
  height: 12px;
  vertical-align: inherit;
}
.submit {
  background-color: #ff6532;
  /* float: right; */
}
.notClick {
  background-color: #ccc;
}
</style>
<style>
.el-dialog {
  width: 45%;
  border-radius: 8px;
}
.el-dialog__body {
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}
.prescriptionDialog_box .el-input {
  width: 85%;
  margin-left: 15px;
}
</style>